<template>
  <el-card class="card">
    <div id="b-map"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";
onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Bc8vExZXrD78tv9Qd7G1TuZcS6bdCOcP&callback=initMap";
  document.body.appendChild(script);
  window.initMap = () => {
    const map = new BMapGL.Map("b-map");
    const point = new BMapGL.Point(114.05, 22.543099);
    map.centerAndZoom(point, 15);

    const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
});
</script>

<style scoped>
#b-map {
  width: 100%;
  height: 500px;
}
</style>

<style>
.anchorBL {
  display: none;
}
</style>
